<template>
  <div class="login-wrapper" :style="{ backgroundImage: 'url(' + bgImage + ')' }">
    <div class="form-wrapper" style="background-color: rgba(255,255,255,0.3)">
      <h1 class="title">欢迎登录lovo商城</h1>
      <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">

        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="warning" @click="$router.push('/zhuce')">快速注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      bgImage: 'http://hzx.ezy2.top/upload/1.webp',
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      user: {},
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          axios.get("/project/user/login", {
            params: {
              userName: this.loginForm.username,
              pwd: this.loginForm.password
            }
          }).then(resp => {
            var info = resp.data
            if (info.tag == 1) {
              this.$message({
                message: "登录失败，账号或密码错误",
                type: "error",
                showClose: true,
              });
            } else {
              this.user = JSON.parse(info.json)
              if (this.user.role == "用户") {
                this.$router.push("/index")
              }
              if (this.user.role == "管理员") {
                // this.$router.push("")
              }
              //登录成功,把当前用户对象放入session
              sessionStorage.setItem("loginUser", info.json)
              this.$message({
                message: "登录成功，欢迎您" + this.loginForm.username,
                type: "success",
                showClose: true,
              });
            }
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
}

.form-wrapper {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 20px;
}

.login-form {
  max-width: 400px;
}
</style>